<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--针对IE的兼容性问题-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对响应式布局之后，针对不同的布局大小自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello boostrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        .sys {
            width: 50%;
            margin: 50px auto 0px;
        }

        table {
            margin-top: 100px;
            /*width: 100%;*/
            border: 1px solid lightpink;
            text-align: center;
            /*vertical-align: middle;*/
        }

        table tr th {
            text-align: center;
        }

        table span {
            color: #cc9eff;
        }

        table span:hover {
            cursor: pointer;
        }

        table tr th {
            font-weight: unset;
        }

        .control {
            /*display: none;*/
        }

        /*.control p span {*/
        /*    display: inline-block;*/
        /*    !*width: 125px;*!*/
        /*}*/

        /*.control p input {*/
        /*    display: inline-block;*/
        /*    width: 90px;*/
        /*}*/

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">

            <table class="tab table table-bordered table-hover">
                <tr>
                    <th>ID号</th>
                    <th>NAME</th>
                    <th>AGE</th>
                    <th>SALARY</th>
                    <th>
                        操作:
                        <span class="btn btn-default" id="add">添加</span>
                    </th>
                </tr>
            </table>
            <form action="#" class="control">
                <p class="form-inline">
                    <!--<span>ID:</span>-->
                    <input type="text" name="id" class="form-control" placeholder="ID">
                    <!--<span>NAME:</span>-->
                    <input type="text" name="name" class="form-control" placeholder="Name">
                    <!--<span>AGE:</span>-->
                    <input type="number" name="age" class="form-control" placeholder="Age" min="0" max="150">
                    <!--<span>SALARY:</span>-->
                    <input type="text" name="salary" class="form-control" placeholder="Salary">
                    <button type="button" id="btn_add" class=" btn btn-default">add</button>
                    <button type="button" id="btn_modify" class=" btn btn-default">alter</button>
                    <button type="button" id="btn_return" class=" btn btn-default">return</button>
                </p>
            </form>
        </div>
    </div>
</div>
<!--导入js文件-->
<script type="text/javascript" src="component/jquery/jquery.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/two-json.js"></script>
</body>
</html>